<template>
  <div>
    <Header></Header>
    <div class="tookMain">
      <div class="tm-left">
        <div class="tm-lf-header">
          <div class="tooksearch">
            <el-input
              style="width: 100%"
              placeholder="请输入内容"
              v-model="searchInput"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search searchIcon"
              ></i>
            </el-input>
          </div>
          <div class="contact">
            <span class="fl">最近联系</span
            ><span class="el-icon-arrow-down fr downIcon"></span>
          </div>
        </div>
        <div class="tm-lf-body" ref="chatBox">
          <ul>
            <li
              v-for="msg in sortedList"
              :key="msg.sendUserId"
              class="contactItem clearfix"
              @click="changeStyle(msg.sendUserId, msg.sendNickName)"
              :class="nowMsg == msg.sendUserId ? 'clickStyle' : ''"
            >
              <img class="contact-img" :src="msg.avartUrl" alt="" />
              <div class="word">
                <div class="clearfix">
                  <span class="contact-name fl">{{ msg.sendNickName }}</span>
                  <img
                    class="fl"
                    src="@/assets/认证.png"
                    style="width: 15px; margin: 4px"
                    alt=""
                  />
                  <span class="contact-time fr">{{ msg.createTime }}</span>
                </div>
                <div class="clearfix">
                  <p class="contact-text">{{ msg.messageContent }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="tm-right">
        <div class="tm-rh-header">{{ nowtookName }}</div>
        <div class="tm-rh-body">
          <ul>
            <li v-for="(single, index) in nowTookList" :key="index">
              <div
                class="msgItem-left clearfix"
                v-show="single.userMessage.sendNickName == nowtookName"
              >
                <h6 class="time">{{ single.userMessage.createTime }}</h6>
                <div class="msg-left fl">
                  <img class="msg-img" :src="single.avartUrl" alt="" />
                </div>
                <div class="msg-right fl">
                  {{ single.userMessage.messageContent }}
                  <span class="triangle-left"></span>
                </div>
              </div>
              <div
                class="msgItem-right clearfix"
                v-show="single.userMessage.sendNickName != nowtookName"
              >
                <h6 class="time">{{ single.userMessage.createTime }}</h6>
                <div class="msg-right2 fr">
                  <img class="msg-img" :src="single.avartUrl" alt="" />
                </div>
                <div class="msg-left2 fr">
                  {{ single.userMessage.messageContent }}
                  <span class="triangle-right"></span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="tm-rh-footer">
          <el-input
            size="medium"
            maxlength="30"
            show-word-limit
            placeholder="请输入内容"
            v-model="msgInput"
            clearable
          >
          </el-input>
          <el-button class="buttonSubmit" type="primary" @click="sendMsg"
            >发送<i class="el-icon-chat-dot-round el-icon--right"></i
          ></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script scoped>
import userMessageApi from "@/api/userMessageApi";
export default {
  name: "took",
  data() {
    return {
      searchInput: "",
      msgInput: "",
      // iffromFriend:true,
      tookFriendId: null,
      nowtookName: "",
      nowMsg: 0,
      //用于更新消息暂时存储使用
      newMsg: {},
      msgList: [
        // {
        //   sendUserId: 202003151002,
        //   sendNickName: "苏曜",
        //   avartUrl:
        //     "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/gy-avartar.jpg",
        //   createTime: "2023-02-23 04:45:39",
        //   messageContent: "哈哈哈哈哈哈",
        // },
      ],
      nowTookList: [
        {
          userMessage: {
            messageId: 10010,
            createTime: "2023-02-22 19:52:26",
            receivedUserId: 202003151002,
            articleId: null,
            articleTitle: null,
            commentId: null,
            sendUserId: 202003150624,
            sendNickName: "Xzh",
            messageType: 0,
            messageContent: "你好",
            status: 0,
          },
          avartUrl: "https://gdr-yhs.oss-cn-hangzhou.aliyuncs.com/icon1.ico",
        },
      ],
    };
  },
  mounted() {
    //如果当前params的userId存在，说明此时仅与这个user聊天
    if (this.$route.params.userId != null) {
      let userId = this.$route.params.userId;
      let userName = this.$route.params.nickName;
      let avartUrl = this.$route.params.avatarUrl;
      this.nowtookName = userName;
      this.tookFriendId = userId;
      sessionStorage.setItem("sendUserId", userId);
      sessionStorage.setItem("sendNickName", userName);
      sessionStorage.setItem("avartUrl", avartUrl);
      this.getOneChatList();
      //首先调用函数，获取到与这个人的所有消息
      this.getChat(userId);
    } else {
      // 这里有两种情况，可能是从总的消息页面跳转过来，也有可能在本页面再次刷新/
      var sendNickName = sessionStorage.getItem("sendNickName");
      if (sendNickName) {
        this.getOneChatList();
        this.getChat(sendUserId);
      } else {
        // 此时是从全部消息页面跳转过来的，无论是不是刷星左侧列表都应该全部展示。
        this.getAllChatList();
      }
    }
  },
  computed: {
    sortedList() {
      return this.sortByTime(this.msgList, "createTime");
    },
  },
  methods: {
    changeStyle(id, name) {
      this.nowMsg = id;
      //更改当前正在交流的朋友
      this.tookFriendId = id;
      this.nowtookName = name;
    },
    sortByTime(array, key) {
      return array.sort(function (a, b) {
        var x = a[key];
        var y = b[key];
        return x > y ? -1 : x > y ? 1 : 0;
      });
    },
    //获取所有的聊天信息
    getAllChatList() {
      userMessageApi.getChatList().then((response) => {
        let List = response.data;
        this.msgList = List;
        //然后获取第一条信息的用户id,用于查找这个人的所有聊天记录
        this.tookFriendId = List[List.length - 1].sendUserId;
        this.getChat(this.tookFriendId);
        return List;
      });
    },
    //此方法只返回左侧列表数据。
    getOneChatList() {
      userMessageApi.getChatList().then((response) => {
        let List = response.data;
        let msg = List.find(
          (item) => item.sendUserId == sessionStorage.getItem("sendUserId")
        );
        if (msg == null) {
          var sendNickName = sessionStorage.getItem("sendNickName");
          var avartUrl = sessionStorage.getItem("avartUrl");
          var sendUserId = sessionStorage.getItem("sendUserId");
          this.msgList = [
            {
              sendUserId: sendUserId,
              sendNickName: sendNickName,
              avartUrl,
              createTime: "",
              messageContent: "",
            },
          ];
        } else {
          this.msgList.push(msg);
          console.log();
          console.log("nagggggggggggggggggggggg", msg);
        }
      });
    },
    //获取和某人的聊天记录
    getChat(friendId) {
      userMessageApi.getChat(friendId).then((response) => {
        let List = response.data;
        this.nowTookList = List;
        console.log(this.nowTookList);
        return List;
      });
    },
    //发送消息
    sendMsg() {
      userMessageApi
        .sendMsg(this.msgInput, this.tookFriendId)
        .then((response) => {
          this.getChat(this.tookFriendId);
        });
    },
  },
  watch: {
    tookFriendId(val, value) {
      //val是之后的 value是之前的
      this.getChat(val);
    },
  },
};
</script>

<style scoped>
.scroll {
}
.tookMain {
  position: relative;
  margin: 0 auto;
  width: 80%;
  /* background-color: white; */
  height: 600px;
}
/*左侧区域 */
.tm-left {
  float: left;
  width: 25%;
  height: 600px;
  border-right: 1px solid #dddddd;
  border-radius: 5px 0 0 5px;
  background-color: white;
}
.tooksearch {
  height: 50px;
  line-height: 50px;
  /* border-bottom: 1px solid #dddddd; */
  margin: 10px 15px 0 15px;
  background-color: #fff;
}
.searchIcon {
  cursor: pointer;
}
.contact {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #dddddd;
  margin: 0 15px;
  background-color: #fff;
}
.downIcon {
  margin: 17px 0;
  font-size: 16px;
  color: #dddddd;
}

.tm-lf-body {
  overflow-y: auto;
  height: 470px;
}
.tm-lf-body::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
}
.contactItem {
  height: 60px;
  margin: 0 15px;
  border-bottom: 1px solid #dddddd;
  /* background-color: pink; */
}
.contactItem:hover {
  cursor: pointer;
}
.contact-img {
  width: 18%;
  border-radius: 24px;
  margin: 9px 0;
}

.word {
  float: right;
  width: 82%;
  height: 60px;
  line-height: 25px;
  padding: 5px 10px;
}
.contact-name {
  font-size: 17px;
}
.contact-time {
  color: #999a9c;
  font-size: 12px;
}
.contact-text {
  color: #999a9c;
  /* 主要代码 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;

  /* 几行后显示省略号 */
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.clickStyle {
  background-color: #f6f6f6;
}

/*右侧区域 */
.tm-right {
  float: left;
  width: 75%;
  height: 600px;
  padding: 0 15px;
  border-radius: 0 5px 5px 0;
  background-color: white;
}
.tm-rh-header {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  border-bottom: 1px solid #dddddd;
}
.tm-rh-body {
  overflow-y: auto;
  height: 350px;
  /* border-bottom: 1px solid #dddddd; */
}

.time {
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  margin: 10px;
}
/*左边的消息 */
.msgItem-left {
  margin: 15px 0;
}
.msg-img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
.msg-right {
  position: relative;
  line-height: 30px;
  border-radius: 10px;
  padding: 15px 10px;
  margin-left: 20px;
  background-color: #f6f6f6;
}
.triangle-left {
  position: absolute;
  width: 0px;
  height: 0px;
  left: -20px;
  top: 15px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid #f6f6f6;
}
/*右边的消息 */
.msgItem-right {
  margin: 15px 0;
}
.msg-left2 {
  position: relative;
  line-height: 30px;
  border-radius: 10px;
  padding: 15px 10px;
  margin-right: 20px;
  background-color: #f6f6f6;
}
.triangle-right {
  position: absolute;
  width: 0px;
  height: 0px;
  right: -20px;
  top: 15px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #f6f6f6;
  border-right: 10px solid transparent;
}
.msg-img-right {
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
.tm-rh-footer {
  padding-top: 30px;
}

.buttonSubmit {
  position: absolute;
  bottom: 20px;
  right: 30px;
}
</style>
